import React, { useState } from 'react';
import { Card, Row, Col, Statistic, DatePicker, Select, Table } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import { Line, Pie, Column } from '@ant-design/plots';
import './styles.css';

const { RangePicker } = DatePicker;

const TransactionAnalysis: React.FC = () => {
  // 模拟数据
  const [timeRange, setTimeRange] = useState<[string, string]>(['2023-01-01', '2023-12-31']);
  const [analysisType, setAnalysisType] = useState<string>('day');

  // 交易趋势数据
  const trendData = [
    { date: '2023-12-01', value: 3500 },
    { date: '2023-12-02', value: 4200 },
    { date: '2023-12-03', value: 3800 },
    { date: '2023-12-04', value: 5000 },
    { date: '2023-12-05', value: 4800 },
    { date: '2023-12-06', value: 5200 },
  ];

  // 交易类型分布数据
  const typeData = [
    { type: '交通数据', value: 35 },
    { type: '金融数据', value: 25 },
    { type: '医疗数据', value: 20 },
    { type: '教育数据', value: 15 },
    { type: '其他', value: 5 },
  ];

  // 地域分布数据
  const regionData = [
    { region: '北京', value: 2500 },
    { region: '上海', value: 2200 },
    { region: '广州', value: 1800 },
    { region: '深圳', value: 1600 },
    { region: '杭州', value: 1400 },
  ];

  // 热门数据产品
  const hotProducts = [
    { rank: 1, name: '城市交通流量数据', sales: 158, growth: 12.5 },
    { rank: 2, name: '消费者行为分析', sales: 142, growth: 8.2 },
    { rank: 3, name: '医疗健康指标数据', sales: 136, growth: 15.7 },
    { rank: 4, name: '教育资源分布数据', sales: 122, growth: -2.3 },
    { rank: 5, name: '环境监测数据', sales: 111, growth: 5.8 },
  ];

  const columns = [
    { title: '排名', dataIndex: 'rank', key: 'rank' },
    { title: '产品名称', dataIndex: 'name', key: 'name' },
    { title: '销量', dataIndex: 'sales', key: 'sales' },
    {
      title: '增长率',
      dataIndex: 'growth',
      key: 'growth',
      render: (growth: number) => (
        <span style={{ color: growth >= 0 ? '#52c41a' : '#f5222d' }}>
          {growth >= 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
          {Math.abs(growth)}%
        </span>
      ),
    },
  ];

  // 图表配置
  const lineConfig = {
    data: trendData,
    xField: 'date',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
    label: {
      style: {
        fill: '#aaa',
      },
    },
    height: 300,
  };

  const pieConfig = {
    data: typeData,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    label: {
      position: 'outside',
      content: '{name} {percentage}%',
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    },
    legend: {
      position: 'bottom',
    },
    interactions: [
      { type: 'element-active' },
    ],
    height: 300,
  };

  const columnConfig = {
    data: regionData,
    xField: 'region',
    yField: 'value',
    label: {
      position: 'top',
    },
    height: 300,
  };

  return (
    <div className="transaction-analysis-container">
      {/* 筛选器 */}
      <Card className="filter-card">
        <Row gutter={16}>
          <Col span={8}>
            <RangePicker
              style={{ width: '100%' }}
              onChange={(dates) => {
                if (dates) {
                  setTimeRange([dates[0]?.format('YYYY-MM-DD') || '', dates[1]?.format('YYYY-MM-DD') || '']);
                }
              }}
            />
          </Col>
          <Col span={8}>
            <Select
              style={{ width: '100%' }}
              value={analysisType}
              onChange={setAnalysisType}
              options={[
                { label: '按日', value: 'day' },
                { label: '按周', value: 'week' },
                { label: '按月', value: 'month' },
              ]}
            />
          </Col>
        </Row>
      </Card>

      {/* 关键指标 */}
      <Row gutter={16} className="stats-row">
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="总交易额"
              value={234567}
              precision={2}
              prefix="¥"
              suffix="元"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="交易笔数"
              value={1234}
              suffix="笔"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="活跃买方"
              value={456}
              suffix="家"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="活跃卖方"
              value={289}
              suffix="家"
            />
          </Card>
        </Col>
      </Row>

      {/* 交易趋势图 */}
      <Card title="交易趋势" className="chart-card">
        <div style={{ height: 300 }}>
          <Line {...lineConfig} />
        </div>
      </Card>

      <Row gutter={16} className="chart-row">
        {/* 交易类型分布 */}
        <Col xs={24} md={12}>
          <Card title="交易类型分布" className="chart-card">
            <div style={{ height: 300 }}>
              <Pie {...pieConfig} />
            </div>
          </Card>
        </Col>

        {/* 地域分布 */}
        <Col xs={24} md={12}>
          <Card title="地域分布" className="chart-card">
            <div style={{ height: 300 }}>
              <Column {...columnConfig} />
            </div>
          </Card>
        </Col>
      </Row>

      {/* 热门数据产品排行 */}
      <Card title="热门数据产品排行" className="table-card">
        <Table
          columns={columns}
          dataSource={hotProducts}
          pagination={false}
          rowKey="rank"
        />
      </Card>
    </div>
  );
};

export default TransactionAnalysis; 